<template>
	<view class="login-content">
		<view class="allbox">
			<view class="box"
				:style='{"boxShadow":"  8rpx 11rpx 25rpx 8rpx rgba(0, 0, 0, 0.18)","borderColor":"#ccc","borderRadius":"0","borderWidth":"0","width":"100%","borderStyle":"solid","height":"100%"}'>
				<!-- 树木背景 -->
				<view class="logo"
					:style='{"padding":"0","boxShadow":"0 0px 0px rgba(0,0,0,0)","margin":"0 0 10rpx","borderColor":"#ccc","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"0","borderWidth":"0","width":"100%","borderStyle":"solid","height":"auto"}'>
					<image
						:style='{"padding":"0","boxShadow":"0 0 0px #59f43e","margin":"0 auto 10rpx","borderColor":"#ccc","borderWidth":"0","width":"100%","borderStyle":"solid","url":"static/电力运输.png","isShow":true,"height":"160px"}'
						src='/static//login.png' mode="heightFix"></image>
				</view>
				<view class="login-title">
					LOGIN
				</view>

				<view class="margin   padding-xl radius">
					<!-- 账号密码 -->
					<view class="login_form_input">

						<view name="username" class="loginBox">
							<uni-easyinput class="inputcss" v-model="idValue" prefixIcon="person" placeholder="请输入账号">
							</uni-easyinput>
						</view>
						<view name="password" class="loginBox">
							<uni-easyinput type="password" prefixIcon="locked" class="inputcss" placeholder="请输入登录密码"
								v-model="passwordValue"></uni-easyinput>
						</view>
					</view>
				</view>
				<!-- 按钮 -->
				<view class="btn">
					<button @click="Login()" class="btn-submit">
						登录</button>
				</view>
				<view class="row" style="display: flex;flex-direction: row;">
					<navigator url="/pages/register/register"
						style="margin: 10rpx 40rpx; color: black;margin-left: 100rpx;margin-top: 20rpx;">前往注册
					</navigator>
				</view>


			</view>
		</view>
	</view>
</template>

<script>
	import Vue from 'vue'
	import Socket from '../../store/websocket.js'


	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				idValue: '', //账号
				// iphoneValue: '', //手机号码
				passwordValue: '', //密码
				testValue: '', //验证码
				showPassword: true, //是否显示密码
				showClearIcon: false, //是否显示清除按钮
				type: 2, //登录的状态 - - - 1是验证码登录、2是密码登录
				token: '',
				timer: 0, //验证码时间
				showTimer: true, //是否显示验证码时间
			}
		},
		computed: {
			...mapState(['isLogin,userInfo']),
		},
		methods: {
			...mapMutations(['login']),
			// 显示隐藏密码
			changePassword: function() { 
				this.showPassword = !this.showPassword;
			},
			// 判断是否显示清除按钮
			clearInput: function(event) {
				this.idValue = event.detail.value;
				if (event.detail.value.length > 0) {
					this.showClearIcon = true;
				} else {
					this.showClearIcon = false;
				}
			},
			// 清除内容/隐藏按钮
			clearIcon: function() {
				this.idValue = '';
				this.showClearIcon = true;
			},
			// 切换登录的方式
			setLoginType(type) {
				this.type = type
			},
			// 密码登录
			Login() {
				let that = this
				//当账号为空或者账号不正确时
				if (!that.idValue) {
					uni.showToast({
						title: '请输入账号',
						icon: 'none'
					})
					return false
				}
				// 当使用密码登录并且未输入密码时
				if (that.type == 2 && !that.passwordValue) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
					return false
				}
				uni.request({
					url: this.$api + '/myusers/login', // 路径
					method: 'POST', // 请求方法
					dataType: 'text',
					data: {
						account: that.idValue, //id
						password: that.passwordValue, //密码
					}, //发送的数据
					header: {
						'Content-Type': 'application/json'
					},
					success: (res) => {
						console.log(res);
						console.log("res.data");
						console.log(res.data);
						console.log(res.data.state);
						let rr = JSON.parse(res.data);
						if (rr.state == 200) {
							console.log("登录成功");

						} else {
							console.log("登录失败");
							uni.showToast({
								title: rr.message,
								icon: 'none'
							})
						}
					}
				})
				let user = {
					name: "",
					role: 0,
					password: "",
					account: 0,
					sex: "",
					area: "",
					identity_card: "",
					depart: "",
				}
				uni.request({
					url: this.$api + '/myusers/selectall',
					method: 'POST', // 请求方法
					dataType: 'text',
					data: {
						account: that.idValue, //id
					}, //发送的数据
					header: {
						'Content-Type': 'application/json'
					},
					success: (res) => {
						console.log(res);
						console.log(res.statusCode);
						console.log(res.data);
						console.log(res.data.state);
						let res1 = JSON.parse(res.data);
						console.log(res1.data);
						if (res1.state == 200) {
							console.log("获取数据成功");
							user.account = res1.data.account;
							user.area = res1.data.area;
							user.depart = res1.data.depart;
							user.name = res1.data.name;
							user.identity_card = res1.data.identity_card;
							user.password = res1.data.password;
							user.sex = res1.data.sex;
							if (res1.data.status == '现场侧') {
								user.role = 1;
							} else {
								user.role = 2;
							}
							that.login(user);
							//开启websocket
							let websocket = new Socket(this.$store.state.userInfo.account, 5000)
							//挂载到全局
							Vue.prototype.$socket = websocket;
							uni.showToast({
								title: '登录成功!',
								icon: 'none'
							})

							uni.switchTab({ // 跳转到主页面
								url: "/pages/index/index",
								success() {
									console.log("success");
								},
								fail() {
									console.log("失败啦")
								}
							})


						} else {
							uni.showToast({
								title: res1.message,
								icon: 'none'
							})
						}
					}
				})
			},


			goRegister() {
				uni.navigateTo({
					url: '/pages/register/register'
				})
			}
		}
	}
</script>

<style scoped>
	.login-content {
		padding: 20px 10px 35px;
		text-align: center;
		color: #333333;

	}

	.login-title {
		font-size: 26px;
		font-weight: bold;
		margin-bottom: 5px;
		display: flex;
		justify-content: center;
	}

	.login-content input {
		height: 50px;
		background: #F8F8F8;
		border-radius: 25px;
		text-align: left;
		padding: 15px;
		box-sizing: border-box;
		font-size: 15px;
	}

	.iphone,
	.password,
	.test {
		position: relative;
		margin-bottom: 30px;
	}

	.iphone .uni-icons,
	.password .uni-icons {
		position: absolute;
		top: 14px;
		right: 30px;
	}

	.test-btn,
	.password-btn {
		color: #006f6b;
		font-size: 15px;
		text-align: right;
	}

	.get-test {
		color: #006f6b;
		font-size: 15px;
		width: 122px;
		height: 50px;
		border: 1px solid #006f6b;
		border-radius: 25px;
		line-height: 50px;
	}

	.test {
		display: flex;
		justify-content: space-between;
	}

	.login-btn {
		width: 30%;
		height: 45px;
		/* background: #0055ff; */
		border-radius: 36px;
		color: #fff;
		font-size: 20px;
		text-align: center;
		line-height: 45px;
		position: fixed;
		left: 10%;
		bottom: 60px;
	}

	.changeRole {
		width: 50%;
		height: 50px;
		background: #F8F8F8;
		border-radius: 25px;
		text-align: left;
		padding: 15px;
		box-sizing: border-box;
		/* position: absolute;
		left: 25%;
		font-size: 15px; */
		position: relative;
		margin-bottom: 30px;
	}

	.changeRole~.uni-icons {
		position: absolute;
		top: 14px;
		right: 10px;
	}

	// 按钮
	.btn-submit {
		height: auto !important;
		width: 300rpx;
		line-height: 70rpx;
		background-color: #006f6b;
		padding: 0;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0);
		margin: 20px auto;
		border-color: #ccc;
		border-radius: 30rpx;
		color: rgba(255, 255, 255, 1);
		font-size: 40rpx;
		border-style: solid;
		display: flex;
		justify-content: center;

	}

	// 背景画图
	.logo {
		background-repeat: no-repeat;
	}

	.logo {
		text-align: center;

		image {
			background-repeat: no-repeat;
			object-fit: contain;
			/* width: 100%;
			height: 100%; */
			/* height: 200upx;
			width: 200upx; */
			margin: 0 0 5upx;
		}
	}

	/* .avatar {
		width: 150upx;
		height: 150upx;
		border-radius: 5%;
		margin-top: 75upx;
	}
 */
	.login_form {
		// background-color: #89AB9E;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 30upx 8%;
		margin-top: 50upx;
	}

	.login_form_name {
		width: 25%;
		color: #445b53;
	}

	.login_form_input {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: column;
		/* justify-content: center; */
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px #eee solid;
		padding: 10upx 0upx;
		margin: 0upx auto;
	}

	//输入框
	.inputcss {
		width: 70%;
		height: 60rpx;
		background-color: #fff;
		color: #333;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0);
		margin: 0;
		margin-left: 10%;
		border-color: rgba(229, 229, 229, 1);
		text-align: left;
		border-radius: 20rpx;
		border-width: 4rpx;
		border-style: solid;
		font-size: 28rpx;
	}

	.loginBox {
		width: 70%;
		height: 70rpx;
		box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
		margin: 10px auto;
		border-color: #ccc;
		background-color: rgba(255, 255, 255, 0);
		border-radius: 0;
		border-width: 0;
		border-style: solid;
		display: flex;
		justify-content: center;
	}

	.btn {
		display: flex;
		justify-content: center;
	}
</style>
